
<?php 
$content = "
<div style='width:80%; margin: 0 auto; display:inline-block; background-color:white; padding:20px; border-radius:10px; max-height:80vh; overflow-y:scroll;'>
	<div> 
		<img src='assets/logo.png' style='box-shadow:2px 2px 5px rgba(0,0,0,0.5); max-width:50px; ' valign='middle'>
		<span style='display:inline-block; font-weight:light; color:black; font-size:30px; text-shadow:2px 2px 5px rgba(0,0,0,0.5);'>Notebubble</span>
	</div>
	
	<p>Welcome to Notebubble! This app is a simple and fast way to store and organize your notes. Here’s a quick guide to help you use all the features:</p>
	
	<h1>Help & Reference</h1>

<div style='text-align: justify !important; text-justify: inter-word; !important'>

	<div class='section'>
		<h2>Categories</h2>
		<p>Notes are grouped into categories. To create one, click the <b>+</b> icon on the sidebar.<br>
		<p>There, you can Name your category and add a description, you can choose an image icon and background color for the category (you can change this later),</p><p>Also, you can You can also set a password to make the category private (optional).</p>
	</div>
	
	<div class='section'>
		<h2>Notes</h2>
		<p>Notes are stored in \"bubbles\" (hence the name of the app) which you can create in a few quick steps:<br><br>
		Creating a note is as fast as just clicking on the category where you want to create a note, start writing it on the space of the bottom and then click <b>Send</b>. You can also press <b>Ctrl+Intro</b> on your keyboard and the note is also submitted.
		<br><br>
		Creating notes is this easy, but there are more options when creating bubbles:
		<br>
		
		<h3>File Attachments</h3>
		You can attach files and images to your notes. Just click on the attachment icon of the note form of the bottom and select the file to attach. Alternatively you can also paste them with Ctrl+V if you have already them in your clipboard.<br><br>
		<b>Note about attached images:</b><br>
		To save database space, images are compressed by default to a lighter format before being added to the database. If you wish to keep the original uncompressed file, disable compression before uploading the image by clicking on the gear button <span style='font-weight:bold; font-family:icons; color:#2980B9;'>(  )</span> in the posting form and unchecking the compress images option.
		<h3>To-Do lists</h3>
		<p>A bubble can have To-Do elements with checkboxes, that you can check and uncheck to keep track of stuff to do, and such.<br>
		To create a to-do element just put the characters >> at the start of the line you are writing, like this:</p>
		<p>>> Oranges<br>
		>> Milk<br>
		>> Newspaper</p>
		<h3>Reminders</h3>
		<p>You can set a reminder for a note, and the app will notify you at the time and date you set about it.<br><br>
		To set up the reminder, just click on the cog icon of the form of the bottom and write in the date and time you wish to be reminded. You can click on the small calendar icon to bring up a date and time picker.
		<br><br>The app will launch a popup when the notification is due.
		</p>	
		
		<h3>Basic text formatting</h3>
		<p>You can give some format to the text you write using limited markup syntax. The available modes available for noe are:</p>
		<table style='display:inline-block;'>
		<tr><td>**text**</td><td>=></td><td><b>Bold text</b></td></tr>
		<tr><td>*text*</td><td>=></td><td><i>Itallic text</i></td></tr>
		<tr><td>__text__</td><td>=></td><td><u>Underline text</u></td></tr>
		</table>
		<br><br>
		More options will come in upcoming app versions.
	</div>

	<div class='section'>
		<h2>Notes Options</h2>
		<p>Once you have submitted a note, there are some few thing that you can do to it. Just hover your mouse over the <span style='font-weight:bold; font-family:icons; color:#2980B9;'></span> icon of each note to display the controls. The available controls are:
		
		<h3>Delete</h3>
		Delete the note if you don't need it anymore.
		
		<h3>Edit</h3>
		You can change the text, attachments and reminders of the note.
		
		<h3>Highlight</h3>
		If the note is important, you can click here to give it a highlight and be faster to locate.
		
		<h3>Pin note</h3>
		If the category has many notes and you need recurrent access to a note, you can pin it to display the pinned note notification at the top of the category. Clicking on this notification will take you directly to the pinned note.
	</div>

	<div class='section'>
		<h2>Category Options</h2>
		Just like notes, categories also have options, that you can access by clicking the menu icon at the top of the category. The available options are:
		
		<h3>Edit</h3>
		You can edit the category name, description, image, background and password if it has one.
		
		<h3>Pin</h3>
		Just like notes, categories can also be pinned. This will make them be displayed at the top of the category list for easy access.
		
		<h3>Delete</h3>
		If you no longer need a category you can delete it. This will delete also all it's messages and attachments.
	</div>
	
	<div class='section'>
		<h2>Search</h2>
		
		If you need to find notes by their content, you can click on the search icon of the category menu and this will bring up the search form, here you can write the text you wish to search and on submiting the system will bring up the notes that have the text you searched for.
	</div>

	<div class='section'>
		<h2>App Settings</h2>
		
		Clicking on the cog icon <span style='font-weight:bold; font-family:icons; color:#2980B9;'>()</span> of the sidebar menu will bring up the settings page. The available settings are:
		
		<h3>Language and Timezone</h3>
		Here you can change the language of the application and your timezone. If the hour and date of the application is wrong, choose the closest city to you. Afterwards, click on the button to save the changes.
		
		<h3>Database Management</h3>
		Normally you don't need to touch these settings, but if you wish to place the database in another place of your computer (like, in a Cloud Storage folder) you can set it here. Note, however, that changing these settings will make the app to look for the database in the place you set here every time.
		
		<h3>Note about the settings:</h3>
		Deleting the ''notebubble'' folder resets the app, including your notes and settings. To keep everything portable, ensure the folder stays with the app’s executable.
	</div>
	</div>
</div>";

echo renderPage($content);